import React from "react";
import {DevProgress, DevProgressPros} from "./DevProgress";
import {SimpleGrid, Stack, Title, Text} from "@mantine/core";

const data: DevProgressPros[] = [
  {name: "工程项目", progress: 0, state: "新开发", color: "blue"},
  {name: "待办事项", progress: 0, state: "新开发", color: "blue"},
  {name: "数字孪生", progress: 30, state: "新开发", color: "blue"},
  {name: "云端文档", progress: 0, state: "新开发", color: "blue"},
  {name: "流量预测", progress: 40, state: "新开发", color: "blue"},
  {name: "中继仿真", progress: 90, state: "新开发", color: "blue"},
  {name: "设备配置", progress: 60, state: "待迁移", color: "grape"},
  {name: "面板分配", progress: 60, state: "迁移中", color: "pink"},
  {name: "安全核查", progress: 10, state: "待迁移", color: "grape"},
  {name: "集采审核", progress: 50, state: "待迁移", color: "grape"},
  {name: "投资审核", progress: 0, state: "新开发", color: "blue"},
  {name: "数据底座", progress: 100, state: "新开发", color: "blue"},
  {name: "访问权限", progress: 95, state: "新开发", color: "blue"},
  {name: "数据权限", progress: 0, state: "新开发", color: "blue"},
  {name: "关于平台", progress: 100, state: "新开发", color: "blue"},
];

export default function Page() {
  return (
    <Stack>
      <Stack gap={1} ta="center">
        <Title order={2} pb="xs">
          焕新升级
        </Title>
        <Text pb="md" c="dimmed">
          IP Designer各功能开发进度直观展示
        </Text>
      </Stack>
      <SimpleGrid cols={{base: 1, sm: 2, lg: 3, xl: 4}}>
        {data.map((item) => (
          <DevProgress
            key={item.name}
            name={item.name}
            progress={item.progress}
            state={item.state}
            color={item.color}
          />
        ))}
      </SimpleGrid>
    </Stack>
  );
}
